<template>
  <div style="height: 28.5rem; opacity: 1" class="piechart" />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import { AjaxToken } from "@/api/common";
import { AjaxGet } from "@/api/common";
import { Loading } from "element-ui";
import "url-search-params-polyfill";
export default {
  mixins: [resize],
  props: {
    CpnID: "",
    ChnanelId: "",
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",

        target: document.querySelector(".piechart"),
      });
      backstage.GetPieChart(this, params, loading);
    },
  },
};
var backstage = {
  // 获取Mngrbaseinfo集合
  GetPieChart: function (thisobj, params, loading) {
    setTimeout(function () {
      AjaxToken(
        thisobj,
        "GetPieChart",
        params,
        "post",
        function (res) {
          loading.close();
          var result = res.data.data;
          var chartdatas = result;
          var legenddata = [];
          var piredata = [];
          let centerNum01 = 0;
          result.forEach((element) => {
            legenddata.push(element.key);
            centerNum01 = parseInt(element.allcount);
            piredata.push({ name: element.key, value: element.value });
          });
          const color = [
            "#66CCCC",
            "#CCFF66",
            "#FF99CC",
            "#FF9999",
            "#FFCC99",
            "#FF6666",
          ];
          const centerItem01 = "总量";

          var option = {
            color: color,
            title: [
              {
                text: "{name|" + centerItem01 + "}\n{val|" + centerNum01 + "}",
                top: "center",
                left: "center",
                textStyle: {
                  rich: {
                    name: {
                      fontSize: 14,
                      fontWeight: "normal",
                      color: "#666666",
                      padding: [10, 0],
                    },
                    val: {
                      fontSize: 32,
                      fontWeight: "bold",
                      color: "#333333",
                    },
                  },
                },
              },
              {
                text: "当月渠道累积失败交易各通道占比",

                left: "5%",
              },
            ],
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "horizontal",
              left: "left",
              bottom: "3%",
              icon: "circle",
              data: legenddata,
            },
            series: [
              {
                name: "失败率",
                legendHoverLink: true,
                hoverAnimation: true,
                radius: ["45%", "60%"],
                type: "pie",
                center: ["50%", "51%"],
                data: piredata,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          thisobj.chart.setOption(option);
        },
        function (err) {}
      );
    }, 3 * 1000);
  },
};
</script>
<style lang="scss" scoped>
</style>
